import { Tabs, WhiteSpace,Badge  } from 'antd-mobile';
import React, { Component } from 'react';
import './system.css';
import Search from './Search';
import { adminCheck, DelAdmin, getAdmin,AddAdmin } from '../Redux/ActionCreator';
import { connect } from 'react-redux';
import { Toast } from 'antd-mobile'
import GotoPage from './GotoPage'
//右边tab栏
const tabs = [
    { title: '查看' },
    { title: '添加' }
];
//右半部分页面
class System extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            position: '',
            tel: '',
            email: '',
            password: '',
            password1: ''
        }
        this.props.dispatch(adminCheck())

        this.handleChangename = this.handleChangename.bind(this)
        this.handleChangeposition = this.handleChangeposition.bind(this)
        this.handleChangetel = this.handleChangetel.bind(this)
        this.handleChangeemail = this.handleChangeemail.bind(this)
        this.handleChangepassword = this.handleChangepassword.bind(this)
        this.handleChangepassword1 = this.handleChangepassword1.bind(this)
    }

    successToast() {
        Toast.info('添加管理员成功', 2);
    }
    errToastone() {
        Toast.info('邮箱不符合规范', 2)
    }
    errToasttwo() {
        Toast.info('填写内容不能为空！', 2)
    }
    errToastthree() {
        Toast.info('手机号不符合规范！', 2)
    }
    errToast(msg) {
        Toast.info(`${msg}`, 2)
    }

    handleChangename(e) {
        this.setState({ name: e.target.value })
    }
    handleChangeposition(e) {
        this.setState({ position: e.target.value })
    }
    handleChangetel(e) {
        this.setState({ tel: e.target.value })
    }
    handleChangeemail(e) {
        this.setState({ email: e.target.value })
    }
    handleChangepassword(e) {
        this.setState({ password: e.target.value })
    }
    handleChangepassword1(e) {
        this.setState({ password1: e.target.value })
    }
    render() {
        return (
            //右半部分div
            <div className="body_right">
                <div className='right_top'>
                    <p>应用管理</p>
                </div>
                <div className='right_middle'>
                    {/* tab栏 */}
                    <WhiteSpace />
                    <Tabs tabs={tabs} initialPage={0} animated={true} useOnPan={false} distanceToChangeTab={0.3}>
                        <div className='search_id'>
                            <p>输入查找的内容</p>
                            <Search />
                            <div className='systemtable'>
                                <table border='0' cellpadding='6' cellspacing='0' className='mytable'>
                                    <thead>
                                        <tr>
                                            <th>编号</th>
                                            <th>ID</th>
                                            <th>姓名</th>
                                            <th>职位</th>
                                            <th>邮箱</th>
                                            <th>电话</th>
                                            <th>上次登录时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {
                                            this.props.adminreducer.map((item, index) => {
                                                return (
                                                    <tr>
                                                        <td>{index + 1}</td>
                                                        <td>{item.admin_id}</td>
                                                        <td>{item.admin_name}</td>
                                                        <td>{item.admin_position}</td>
                                                        <td>{item.admin_email}</td>
                                                        <td>{item.admin_phone}</td>
                                                        <td>{item.admin_last_time}</td>
                                                        <td>
                                                            <button className='delete'
                                                                onClick={() => {
                                                                    const adminpwd = prompt('请输入管理员登录密码：')
                                                                    if (adminpwd) {
                                                                        this.props.dispatch(DelAdmin(getAdmin(this.props).admin_id, item.admin_id, adminpwd))
                                                                    }
                                                                    return false;
                                                                }}>删除</button>
                                                        </td>
                                                    </tr>
                                                )
                                            })
                                        }
                                    </tbody>
                                </table>
                                <GotoPage />
                            </div>
                        </div>

                        <div className='addapp'>
                            <div className='username'>
                                <span>姓名 : </span>
                                <input
                                    type='text'
                                    placeholder='请输入姓名'
                                    id='input_adminname'
                                    value={this.state.name}
                                    onChange={this.handleChangename}
                                />
                            </div>
                            <div className='position'>
                                <span>职位 : </span>
                                <input
                                    type='text'
                                    placeholder='请输入职位'
                                    id='input_pos'
                                    value={this.state.position}
                                    onChange={this.handleChangeposition}
                                />
                            </div>
                            <div className='tel'>
                                <span>手机号 : </span>
                                <input
                                    type='tel'
                                    placeholder='请输入手机号'
                                    id='input_tel'
                                    value={this.state.tel}
                                    onChange={this.handleChangetel}
                                />
                            </div>
                            <div className='email'>
                                <span>邮箱 : </span>
                                <input
                                    type='email'
                                    placeholder='请输入邮箱'
                                    id='input_email'
                                    value={this.state.email}
                                    onChange={this.handleChangeemail}
                                />
                            </div>
                            <div className='password'>
                                <span> 密码 : </span>
                                <input
                                    type='text'
                                    placeholder='请输入密码'
                                    id='input_pwd'
                                    value={this.state.password}
                                    onChange={this.handleChangepassword}
                                />
                            </div>
                            <div className='password1'>
                                <span> 确认密码 : </span>
                                <input
                                    type='text'
                                    placeholder='请再次输入密码'
                                    id='input_pwd_once'
                                    value={this.state.password1}
                                    onChange={this.handleChangepassword1}
                                />
                            </div>
                            <button className='add'
                                onClick={() => {
                                    if (this.state.name === '' || this.state.position === '' || this.state.tel === '' || this.state.email === '' || this.state.password === '' || this.state.password1 === '') {
                                        this.errToasttwo()
                                    }
                                    else if (!/^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/.test(this.state.tel)) {
                                        this.errToastthree()
                                    }
                                    else if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.state.email)) {
                                        this.errToastone()
                                    }
                                    else {
                                        var adminpwd = prompt('请输入管理员登录密码：')
                                        if (adminpwd) {
                                            this.props.dispatch(AddAdmin(getAdmin(this.props).admin_id,adminpwd,this.state.name, this.state.position, this.state.tel, this.state.email,this.state.password, this.state.password1))
                                        }
                                        console.log(this.state.password);
                                        console.log(this.state.password1);
                                        return false;
                                    }
                                }}> 添加</button>

                            <button className='remove'
                                onClick={() => {
                                    document.getElementById('input_adminname').value = '';
                                    document.getElementById('input_pos').value = '';
                                    document.getElementById('input_tel').value = '';
                                    document.getElementById('input_email').value = '';
                                    document.getElementById('input_pwd').value = '';
                                    document.getElementById('input_pwd_once').value = '';
                                }}>取消</button>
                        </div>
                    </Tabs>
                    <WhiteSpace />
                </div>
            </div>
        );
    }
}
const mapStateToProps = (state) => ({
    adminreducer: state.adminreducer,
    loginreducer: state.loginreducer
})
export default connect(mapStateToProps)(System);
